<template lang="html">
  <div class="" id="">

    <!--滑动区域-->
		<div id="mescroll" class="mescroll" style="position:fixed; top:0px; bottom:0px; height:auto;">
			<!--展示上拉加载的数据列表-->
      <ul class="locklist" id="dataList">
        <li v-for="items in pdlist" :key="items.key">
          <div class="">
            <p class="lockTime">密码开门 <span>{{items.time}}</span></p>
            <!-- <em>密码：{{items.lock_code}}</em> -->
          </div>
          <p class="lightColor">
            {{lockInfo.provinceName}}
            {{lockInfo.cityName}}
            {{lockInfo.districtName}}
            {{lockInfo.address}}
            {{lockInfo.communityName}}</p>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
import MeScroll from 'mescroll.js';
export default {
  name:'',
  data: () =>({
    mescroll: null,
    pdlist: [],
    lockInfo:'',
  }),
  methods: {
    //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
		upCallback: function(page) {
			//联网加载数据
			var self = this;
			self.getListDataFromNet(page.num, page.size, function(curPageData) {
				//curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置

				//如果是第一页需手动制空列表 (代替clearId和clearEmptyId的配置)
				if(page.num == 1) self.pdlist = [];

				//更新列表数据
				self.pdlist = self.pdlist.concat(curPageData);

				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
				console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length+", self.pdlist.length==" + self.pdlist.length);
				//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
				self.mescroll.endSuccess(curPageData.length);

			}, function() {
				//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
				self.mescroll.endErr();
			});
		},
    getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
      let that = this;
      let lock_id = that.lockInfo.lock_id;
        this.$ajax.get(configUrl.USERLOCKRECORD_URL, {
					params: {
            lock_id:lock_id,
						currentPage: pageNum, //页码
						showCount: pageSize //每页长度
					}
				})
				.then((response) => {
          console.log(response);
					var data=response.data.dataList.data;
          successCallback&&successCallback(data);//成功回调
				})
				.catch((error) => {
					errorCallback&&errorCallback()//失败回调
				});
		}
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let lockInfo = self.$route.query.lockInfo;    //锁id
    console.log(lockInfo);
    self.lockInfo = lockInfo;
		self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
			up: {
				callback: self.upCallback, //上拉回调
				//以下参数可删除,不配置
				isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
				//page:{size:8}, //可配置每页8条数据,默认10
				toTop:{ //配置回到顶部按钮
					// src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
					html: "top", //html标签内容,默认null; 如果同时设置了src,则优先取src
					offset : 200
				},
				empty:{ //配置列表无任何数据的提示
					warpId:"dataList",
					icon : require("@/assets/images/attention@2x.png") ,
						  	tip : "当前还没有开锁记录~" ,
//						  	btntext : "去逛逛 >" ,
//						  	btnClick : function() {
//						  		alert("点击了去逛逛按钮");
//						  	}
				},
				//vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
				//vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
//						clearId: "dataList",
//						clearEmptyId: "dataList"
			}
		});
  },
}
</script>

<style lang="scss" scoped>
.locklist li{
  padding: 10px;
  line-height: 2em;
  border-bottom: 1px solid $borderColor;
  .lockTime{
    @include flex;
    justify-content: space-between;
  }
}
</style>
